<template>
  <div class="btnTabs-root">
    <div @click="tabsClick(index)" :class="['btnTabs-btn',isAct(index)]" v-for="(item,index) in items">{{item.name}}</div>


  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'

  export default {
    name: 'btnTabs',
    props: {
      defaultActive: {
        type: Number,
        default: 0
      },
      items: {
        type: Array,
        default() {
          return []
        }
      }
    },
    setup(props, content) {
      let data = reactive({
        activeIndex: props.defaultActive
      })
      const isAct = (index) => {
        return index == data.activeIndex ? 'is-active' : null
      }
      const tabsClick = (index) => {
        data.activeIndex = index
        content.emit('change', props.items[index])
      }
      return { ...toRefs(data), isAct, tabsClick }
    }
  }
</script>

<style scoped lang="scss">
  .btnTabs-root {
    .btnTabs-btn {
      display: inline-block;
      width: 120px;
      text-align: center;
      /*background-color: green;*/
      border-right: 1px solid #fff;
      height: 20px;
      line-height: 20px;

      &:hover {
        cursor: pointer;
      }
    }

    .is-active {

    }

  }
</style>
